<script>
import WeatherTypes from "@/views/VisualizationSet/components/WeatherTypes.vue";
import MonthTs from "@/views/VisualizationSet/components/MonthTs.vue"
import VisualizationOne from "@/views/VisualizationSet/components/VisualizationOne.vue"
import VisualizationTwo from "@/views/VisualizationSet/components/VisualizationTwo.vue"
import VisualizationThree from "@/views/VisualizationSet/components/VisualizationThree.vue"
import VisualizationFour from "@/views/VisualizationSet/components/VisualizationFour.vue"
import VisualizationFive from "@/views/VisualizationSet/components/VisualizationFive.vue"
import VisualizationSix from "@/views/VisualizationSet/components/VisualizationSix.vue"

  export default {
    name: 'VisualizationSet',
    components: {
      "WeatherTypes": WeatherTypes,
      "MonthTs": MonthTs,
      "VisualizationOne": VisualizationOne,
      "VisualizationTwo": VisualizationTwo,
      "VisualizationThree": VisualizationThree,
      "VisualizationFour": VisualizationFour,
      "VisualizationFive": VisualizationFive,
      "VisualizationSix": VisualizationSix,
    }
  }
</script>

<template>
<div id="vis-box">
  <div class="box-top">
    <div class="box-div1">
      <WeatherTypes></WeatherTypes>
    </div>
    <div class="box-div2">
      <MonthTs></MonthTs>
    </div>
  </div>
  <div class="box-center-one">
    <div class="box-div1">
      <VisualizationOne></VisualizationOne>
    </div>
    <div class="box-div2">
      <VisualizationTwo></VisualizationTwo>
    </div>
  </div>
  <div class="box-center-two">
    <div class="box-div1">
      <VisualizationThree></VisualizationThree>
    </div>
    <div class="box-div2">
      <VisualizationFour></VisualizationFour>
    </div>
  </div>
  <div class="box-bottom">
    <div class="box-div1">
      <VisualizationFive></VisualizationFive>
    </div>
    <div class="box-div2">
      <VisualizationSix></VisualizationSix>
    </div>
  </div>
</div>
</template>

<style scoped>
@import "css/VisualizationSet.css";
</style>